<template>
    <div class="container">
        <ul class="index">
            <li>
                <router-link :to="{ path:'/up/tg/video',query:{ mid: props.mid } }" :style="select(0)" @click="selIndex = 0">
                    <span>视频</span>
                    <span>{{ info?.video }}</span>
                </router-link>
            </li>
            <li>
                <router-link :to="{ path:'/up/tg/audio',query:{ mid: props.mid } }" :style="select(1)" @click="selIndex = 1">
                    <span>音频</span>
                    <span>{{ info?.audio }}</span>
                </router-link>
            </li>
            <li >
                <router-link :to="{ path:'/up/tg/article',query:{ mid: props.mid } }" :style="select(2)" @click="selIndex = 2">
                    <span>专栏</span>
                    <span>{{ info?.article }}</span>
                </router-link>
            </li>
            <li>
                <router-link :to="{ path:'/up/tg/album',query:{ mid: props.mid } }" :style="select(3)" @click="selIndex = 3">
                    <span>相簿</span>
                    <span>{{ info?.album }}</span>
                </router-link>
            </li>
        </ul>
        <div class="contaBox">
            <router-view></router-view>
        </div>
    </div> 
</template>

<script lang="ts" setup>
import { get } from '@/http/axios'
import { onBeforeMount,ref, reactive, computed } from 'vue'
import { useRouter } from 'vue-router'
interface Props{
    mid:number
 }
const props = defineProps<Props>()
let info = ref()
let selIndex = ref<number>(0)
const router =useRouter()
const selList = reactive({
    '/up/tg/video':0,
    '/up/tg/audio':1,
    '/up/tg/article':2,
    '/up/tg/album':3
})
onBeforeMount(() => {
    initData()
    selIndex.value = selList[router.currentRoute.value.path]
})
function initData(){
    get('/x/space/navnum?mid=' + props.mid).then(res => {
        info.value = res.data
    }).catch(err => {
        alert('投稿导航栏数据加载失败')
    })
}
const select = computed(() => (index:number) => {
    if (index === selIndex.value) {
        return {
            'background':'#00a1d6',
            'color':'white',
            '--spanCol':'white'
        }
    } else {
        return {
            '--spanCol':'#99A2AA'
        }
    }
})
</script>

<style lang="scss" scoped>
.container{
    min-width: 1300px;
    background: white;
    margin-top: 30px;
    display: flex;
    border: 1px solid var(--el-border-color);
    border-radius: 4px;
}
.index{
    margin: 0;
    width: 20%;
    border-right: 1px solid var(--el-border-color);
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10px 0;
    gap: 20px 0;
    list-style: none;
    & li{
        width: 100%;
    }
    & li a{
        width: 100%;
        color: #222222;
        font-size: 14px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 10px 30px;
        box-sizing: border-box;
    }
    & li a span:nth-child(2){
        color: var(--spanCol);
    }
    & li a:hover{
        background: #f4f5f7;
        color: #00a1d6;
    }
}
.contaBox{
    width: 80%;
}
</style>